<template>
    <div class="s-canvas">
        <canvas id="s-canvas" :width="contentwidth" :height="contentheight"></canvas>
    </div>
</template>
<script>
export default {
    name: 'sidentify',
    props: {
        identifycode: {
            default: '1234'
        },
        fontsizemin: {
            default: 25
        },
        fontsizemax: {
            default: 30
        },
        backgroundcolormin: {
            default: 255
        },
        backgroundcolormax: {
            default: 255
        },
        colormin: {
            default: 0
        },
        colormax: {
            default: 160
        },
        linecolormin: {
            default: 100
        },
        linecolormax: {
            default: 255
        },
        dotcolormin: {
            default: 0
        },
        dotcolormax: {
            default: 255
        },
        contentwidth: {
            default: 112
        },
        contentheight: {
            default: 31
        }
    },
    methods: {
        // 生成一个随机数
        randomnum(min, max) {
            return math.floor(math.random() * (max - min) + min)
        },
        // 生成一个随机的颜色
        randomcolor(min, max) {
            let r = this.randomnum(min, max)
            let g = this.randomnum(min, max)
            let b = this.randomnum(min, max)
            return 'rgb(' + r + ',' + g + ',' + b + ')'
        },
        drawpic() {
            let canvas = document.getelementbyid('s-canvas')
            let ctx = canvas.getcontext('2d')
            ctx.textbaseline = 'bottom'
            // 绘制背景
            ctx.fillstyle = this.randomcolor(this.backgroundcolormin, this.backgroundcolormax)
            ctx.fillrect(0, 0, this.contentwidth, this.contentheight)
            // 绘制文字
            for (let i = 0; i < this.identifycode.length; i++) {
                this.drawtext(ctx, this.identifycode[i], i)
            }
            this.drawline(ctx)
            this.drawdot(ctx)
        },
        drawtext(ctx, txt, i) {
            ctx.fillstyle = this.randomcolor(this.colormin, this.colormax)
            ctx.font = this.randomnum(this.fontsizemin, this.fontsizemax) + 'px simhei'
            let x = (i + 1) * (this.contentwidth / (this.identifycode.length + 1))
            let y = this.randomnum(this.fontsizemax, this.contentheight - 5)
            var deg = this.randomnum(-45, 45)
            // 修改坐标原点和旋转角度
            ctx.translate(x, y)
            ctx.rotate(deg * math.pi / 180)
            ctx.filltext(txt, 0, 0)
            // 恢复坐标原点和旋转角度
            ctx.rotate(-deg * math.pi / 180)
            ctx.translate(-x, -y)
        },
        drawline(ctx) {
            // 绘制干扰线
            for (let i = 0; i < 5; i++) {
                ctx.strokestyle = this.randomcolor(this.linecolormin, this.linecolormax)
                ctx.beginpath()
                ctx.moveto(this.randomnum(0, this.contentwidth), this.randomnum(0, this.contentheight))
                ctx.lineto(this.randomnum(0, this.contentwidth), this.randomnum(0, this.contentheight))
                ctx.stroke()
            }
        },
        drawdot(ctx) {
            // 绘制干扰点
            for (let i = 0; i < 80; i++) {
                ctx.fillstyle = this.randomcolor(0, 255)
                ctx.beginpath()
                ctx.arc(this.randomnum(0, this.contentwidth), this.randomnum(0, this.contentheight), 1, 0, 2 * math.pi)
                ctx.fill()
            }
        }
    },
    watch: {
        identifycode() {
            this.drawpic()
        }
    },
    mounted() {
        this.drawpic()
    }
}
</script>
<style scoped>
.s-canvas {
    height: 38px;
}
.s-canvas canvas {
    margin-top: 1px;
    margin-left: 8px;
}
</style>